<template>
	<!-- 拜访名单，收藏名单列表组件 -->
	<view>
		<u-card :show-head="false" margin="0">
			<view slot="body">
				<view class="dropdown">
					<u-dropdown ref="uDropdown" active-color="#FF9136">
						<u-dropdown-item :title="$t('地区')">
							<view class="region">
								<view class="country">
									<!-- 国家 -->
									<u-cell-group :border="false">
										<u-cell-item v-for="(i,j) in area" :key="j" :arrow="false" :title="i.label"
											:title-style="{ fontSize: '21rpx', color: isCountry(i.value) }"
											bg-color="#F3F3F3"
											@click="countryClick(i.value, i.children,i.label)"></u-cell-item>
									</u-cell-group>
								</view>
								<view class="province">
									<scroll-view scroll-y style="height: 100%;">
										<u-cell-group :border="false">
											<u-cell-item v-for="(i,j) in province" :key="j" :arrow="false"
												:title="i.label"
												:title-style="{ fontSize: '21rpx', color: isProvince(i.value) }"
												bg-color="#F3F3F3"
												@click="provinceClick(i.value, i.children,i.label)"></u-cell-item>
										</u-cell-group>
									</scroll-view>
								</view>
								<view style="flex: 3;">
									<scroll-view scroll-y style="height: 100%;">
										<view class="city">
											<view v-for="(i,j) in city" :key="j" :class="[classCity(i.value)]"
												@click="cityClick(i.value, i.label)">
												{{ i.label }}
											</view>
										</view>
									</scroll-view>
								</view>
							</view>
						</u-dropdown-item>
						<!--        评分-->
						<u-dropdown-item v-model="integral" :title="$t('联络状态')" @change="closes">
							<u-cell-group :border="false">
								<u-cell-item :title-style="{ fontSize: '21rpx', color: integral =='0' ?'#EF692A':'' }"
									:arrow="false" :title="$t('已联络')" bg-color="#F3F3F3"
									@click="integral = '0';closes();$refs.uDropdown.close();"></u-cell-item>
								<u-cell-item :title-style="{ fontSize: '21rpx', color: integral =='1' ?'#EF692A':'' }"
									:arrow="false" :title="$t('未联络')" bg-color="#F3F3F3"
									@click="integral = '1';closes();$refs.uDropdown.close();"></u-cell-item>
							</u-cell-group>
						</u-dropdown-item>
					</u-dropdown>
				</view>
				<view class="grayBox u-flex" v-for="item in listData" :key="item.id">
					<view v-if="isCheckStatus">
						<u-checkbox active-color="#ff7348" shape="circle" @change="change"
							v-model="item.checked"></u-checkbox>
					</view>
					<view class="u-flex-1" style="overflow: hidden;">
						<view class="entName u-line-1">{{item.enterpriseName}}</view>
						<view class="u-margin-top-20 u-margin-bottom-20">
							<view class="tag">{{item.typeName}}</view>
						</view>
						<view class="u-flex">
							<view class="u-flex-1">
								<view>{{$t("电话")}}</view>
								<view class="color-999 u-font-24 u-margin-top-20">{{item.tel}}</view>
							</view>
							<view class="u-margin-right-40"><u-line length="50" color="#ccc" direction="col" /></view>
							<view class="u-flex-1">
								<view>{{$t("联络状态")}}</view>
								<view class="color-999 u-font-24 u-margin-top-20">{{item.callStatus}}</view>
							</view>
						</view>
						<view class="u-margin-top-20 u-margin-bottom-20"><u-line color="#ccc" /></view>
						<view class="u-flex u-row-between">
							<view class="color-999 u-font-24">
								{{$t('添加时间')}}：{{item.createTime}}
							</view>
							<view>
								<image v-if="item.country === '0'" class="radioCity"
									:src='serverImageUrl("/static/images/index/huangjin.png")'>
								</image>
								<image v-else class="radioCity" :src='serverImageUrl("/static/images/index/huangji.png")'>
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-card>
	</view>
</template>

<script>
	export default {
		props: {
			checkAll: {
				type: Boolean,
				default: false,
			},
			isCheckStatus: {
				//是否显示选中
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				//地区
				area: [],
				province: [],
				city: [],
				cityCurrent: null,
				provinceCurrnet: null,
				countryCurrent: null,
				listData: [{
					id: 'asdfasdfasdf',
					enterpriseName: '手动阀阿斯蒂芬阿斯蒂芬阿斯蒂芬水电费',
					typeName: '日常百货',
					tel: '18883736464',
					callStatus: "未联络",
					createTime: '2024年8月21日 11:13:03',
					country: '0',
					checked: false
				}, {
					id: '3333',
					enterpriseName: '手动阀阿斯蒂芬阿斯蒂芬阿斯蒂芬水电费',
					typeName: '日常百货',
					tel: '18883736464',
					callStatus: "未联络",
					createTime: '2024年8月21日 11:13:03',
					country: '0',
					checked: false
				}, {
					id: '4444',
					enterpriseName: 'asdf撒旦法阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬',
					typeName: '日常百货',
					tel: '18883736464',
					callStatus: "未联络",
					createTime: '2024年8月21日 11:13:03',
					country: '1',
					checked: false
				}],
				integral: '0', //联络状态 0 未联络 1 已联络
			};
		},
		watch: {
			checkAll(val) {
				if (val) {
					this.listData.forEach(item => item.checked = true);
				} else {
					this.listData.forEach(item => item.checked = false);
				}
				this.$emit('change', this.listData)
			}
		},
		computed: {
			classCity() {
				return (id) => {
					return this.cityCurrent === id ? 'currCity' : ''
				}
			},
			isProvince() {
				return (id) => {
					return this.provinceCurrnet === id ? "#EF692A" : ""
				}
			},
			isCountry() {
				return (id) => {
					return this.countryCurrent === id ? "#EF692A" : ""
				}
			},
		},
		mounted() {
			this.getareaOptions();
		},
		methods: {
			change(e) {
				this.$emit('change', this.listData)
			},
			//关闭
			closes() {
				console.log(this.cityCurrent, this.integral);
				//获取list  并执行 this.$emit('change', this.listData)
				// this.getLibraryLists({
				// 	area: this.currentCity,
				// 	category_id: this.two,
				// 	score: this.score.filter(item => item.value === this.integral)[0]?.label || ""
				// })
			},
			//获取城市信息
			getareaOptions() {
				this.$u.api.basic.getSelectCityList({
					is_port: true
				}).then(res => {
					this.area = res
				})
			},
			cityClick(id, city) {
				this.currentCity = city
				//城市信息(默认不限)
				this.cityCurrent = id
				console.log("当前城市", this.currentCity);
				//获取分类
				// this.getLibraryLists({
				// 	area: this.currentCity,
				// 	category_id: this.two,

				// 	score: this.score.filter(item => item.value === this.integral)[0]?.label || ""
				// })
				this.$refs.uDropdown.close();
				this.closes()
			},
			provinceClick(id, children, label) {
				this.city = []
				this.city = children
				this.provinceCurrnet = id
				console.log("当前省分", this.city, this.two, this.score.filter(item => item.value === this.integral)[0]
					?.label || "--");


				//获取分类
				// this.getLibraryLists({
				// 	area: label,
				// 	category_id: this.two,
				// 	score: this.score.filter(item => item.value === this.integral)[0]?.label || ""
				// })
			},
			//国家
			countryClick(id, children, label) {
				this.province = []
				this.city = []
				this.province = children
				this.countryCurrent = id
				// console.log("当前国家",this.province,this.category,this.score.filter(item => item.value === this.integral)[0]?.label || "--");



				//获取分类
				// this.getLibraryLists({
				// 	area: label,
				// 	category_id: this.two,
				// 	score: this.score.filter(item => item.value === this.integral)[0]?.label || ""
				// })
				// this.$refs.uDropdown.close();
				// this.closes()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.region {
		height: 500rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;

		.country {
			flex: 1;
		}

		.province {
			flex: 1;
			// overflow: scroll;
		}

		.city {
			display: grid;
			grid-template-columns: repeat(3, 103rpx);
			justify-content: space-around;
			overflow: scroll;
			padding-bottom: 20rpx;

			view {
				margin-top: 20rpx;
				width: 103rpx;
				height: auto;
				padding: 5px 0px 5px 5px;
				text-wrap: normal;
				background: #EEEEEE;
				border-radius: 14rpx;
				font-size: $my-font-size21;
				font-weight: 400;
				color: #000000;
				line-height: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				word-break: break-word;
			}
		}

	}

	.grayBox {
		background: #f6f6f6;
		padding: 30rpx 20rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;

		.color-999 {
			color: #999;
		}

		.entName {
			font-size: 30rpx;
		}

		.radioCity {
			width: 60rpx;
			height: 40rpx;
		}

		.tag {
			background-color: #ffeee7;
			color: #ff7348;
			padding: 10rpx 0;
			min-width: 150rpx;
			display: inline-block;
			text-align: center;
			font-size: 24rpx;
		}
	}
</style>